import {
  Input,
  InputLeftAddon,
  InputGroup,
  InputRightAddon,
  Box
} from '@chakra-ui/react'
import { css } from '@emotion/react'
import { AiOutlineSearch, AiTwotoneAudio } from 'react-icons/ai'

const inputGroup = {
  margin: '0 auto',
  marginTop: '20px',
  boxShadow: '0 1px 6px 0 rgb(32 33 36 / 28%)',
  borderRadius: '22px'
}
const inputBox = css`
  text-align: center;
`
const inputAddon = {
  bgColor: '#fff',
  border: 0,
  fontSize: '20px',
  color: 'rgba(0, 0, 0, 1)'
}
const inputAddonLeft = {
  borderRadius: '22px 0 0 22px'
}
const inputAddonRight = {
  borderRadius: '0 22px 22px 0'
}

const input = {
  fontSize: '16px',
  color: '#616161  ',
  _focus: {
    borderColor: '#fff',
    boxShadow: 0
  }
}

export default function shuru () {
  return (
    <Box css={inputBox}>
      <InputGroup size='sm' w='561px' h='44px' {...inputGroup}>
        <InputLeftAddon
          h='44px'
          children={<AiOutlineSearch />}
          {...inputAddon}
          {...inputAddonLeft}
        />
        <Input
          h='44px'
          borderRadius='0'
          border='0'
          placeholder='在 Google 上搜索，或者输入一个网址'
          {...input}
        />
        <InputRightAddon
          h='44px'
          children={<AiTwotoneAudio />}
          {...inputAddon}
          {...inputAddonRight}
        />
      </InputGroup>
    </Box>
  )
}
